<!--
  周选择器
-->

<template>
  <div class="datepicker-week-wrap">
    <DatePicker
      :size="inputSize"
      :open="open"
      :id="id"
      :key="id"
      :ref="id"
      :value="defaultDate"
      :options="options"
      @on-change="handleChangeDate"
    >
      <Input
        readonly
        ref="week-input"
        :value="selectedWeek"
        :size="inputSize"
        icon="ios-clock-outline"
        placeholder="选择日期"
        @on-focus="handleFocus"
        @on-blur="cancel"
      />
    </DatePicker>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import weekOfYear from 'dayjs/plugin/weekOfYear'

dayjs.extend(weekOfYear)

const datePickerWeekSize = Object.freeze(['small', 'large'])

export default {
  name: 'datepickerweek',
  props: {
    id: {
      type: String,
      default: 'datepickerweek'
    },
    defaultDate: {
      type: String,
      default: () => {
        return dayjs(new Date().toLocaleDateString()).format('YYYY-MM-DD')
      }
    },
    size: {
      type: String,
      default: 'default'
    },
    options: Object
  },
  data() {
    return {
      open: false,
      cellEle: null,
      selectedWeek: undefined,
      $dom: null
    }
  },
  computed: {
    inputSize() {
      const index = datePickerWeekSize.indexOf(this.size)
      if (~index) {
        return this.size
      }
      return 'default'
    }
  },
  mounted() {
    // 绑定事件
    this.initDate()
    this.diapatchEvent()
  },
  methods: {
    /**
     * desc: 初始化日期
     * param {type}
     * return: void
     */
    initDate() {
      const _year = dayjs(this.defaultDate).year()
      const _week = dayjs(this.defaultDate).week()
      this.selectedWeek = `${_year}年第${_week}周`
    },
    /**
     * desc: 操作时间绑定
     * param {type}
     * return: void
     */
    diapatchEvent() {
      const _el = this.$refs[this.id].$el
      this.cellEle = _el.querySelector('.ivu-date-picker-cells')
      this.$dom = document.createElement('div')
      this.$dom.setAttribute('class', 'selected-row')
      this.cellEle.addEventListener('mouseover', this.handleMouseOver)
      this.cellEle.addEventListener('mousemove', this.handleMouseMove)
      this.cellEle.addEventListener('mouseout', this.handleMouseOut)
    },
    handleMouseOver() {
      this.cellEle.appendChild(this.$dom)
    },
    handleMouseMove() {
      event.stopPropagation()
      const { target } = event
      const { nodeName } = target
      if (nodeName === 'EM') {
        const { offsetHeight, offsetTop } = target
        this.$dom.style.height = offsetHeight + 2 + 'px'
        this.$dom.style.top = offsetTop - 1 + 'px'
      }
    },
    handleMouseOut() {
      this.cellEle.removeChild(this.$dom)
    },
    /**
     * desc: 关闭窗口
     * param {type}
     * return: void
     */
    cancel() {
      this.open = false
      this.$refs['week-input'].blur()
      this.cellEle.removeEventListener('mouseover', this.handleMouseOver)
      this.cellEle.removeEventListener('mousemove', this.handleMouseMove)
      this.cellEle.removeEventListener('mouseout', this.handleMouseOut)
    },
    /**
     * desc: 日期改变
     * param {type}
     * return: void
     */
    handleChangeDate(val) {
      if (val) {
        const _year = dayjs(val).year()
        const _week = dayjs(val).week()
        this.selectedWeek = `${_year}年第${_week}周`
        this.$emit('on-change', `${_year}-${_week}`)
        this.cancel()
      }
    },
    /**
     * desc: 输入框获取焦点
     * param {type}
     * return: void
     */
    handleFocus() {
      this.open = true
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';

.datepicker-week-wrap {
  @{deep} .ivu-date-picker-cells {
    position: relative;
    .ivu-date-picker-cells-cell {
      &:hover {
        em {
          background: transparent;
        }
      }
    }
  }
  @{deep} .selected-row {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(225, 240, 254, 0.5);
    z-index: -1;
  }
}
</style>
